<!-- 消息--发送结果 -->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="disFlx _mb-20">
      <div class="_mb-10 fz-14 content _mr-20" v-for="item in messageChannelList" :key="item.templateId">
        <div class="fw-6">
          <span>【{{ Dict.getDictItem(Dict.getLocal('messageChannelDict'), item.messageChannel).dictLabel }}】</span>
          <span>【{{ item.name }}】</span>
        </div>
        <div style="white-space: break-spaces">
          {{ item.smsZhContent }}
        </div>
      </div>
    </div>
    <div class="table-page-search">
      <a-form>
        <span class="_pr-15"
          >【合计：<a>{{ row.totalNum }}</a
          >（发送成功/已读：<a>{{ row.sendSuccessNum }}</a
          >/ <a>{{ row.readNum }}</a
          >）】</span
        >
        <a-form-item label="发送状态">
          <a-select v-model="queryParam.sendStatus" placeholder="请选择" allowClear>
            <template v-for="item in Dict.getLocal('sendStatusDict')">
              <a-select-option v-if="!item.hide" :value="item.dictValue" :key="item.dictValue">{{
                item.dictLabel
              }}</a-select-option>
            </template>
          </a-select>
        </a-form-item>
        <a-form-item label="阅读情况">
          <a-select v-model="queryParam.readStatus" placeholder="请选择" allowClear>
            <a-select-option
              v-for="item in Dict.getLocal('readStatusDict')"
              :value="item.dictValue"
              :key="item.dictValue"
              >{{ item.dictLabel }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
          <a-button type="primary" :disabled="!selectedRowKeys.length" @click="handleResend">重新发送通知</a-button>
        </span>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, enabled, title"
      :columns="columns"
      :data="loadData"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :rangPicker="range"
      :showPagination="false"
    >
      <!-- 自定义标题--状态 -->
      <span slot="customTitleSendStatus">
        <span class="disFlxAC">
          <span>状态</span>
          <a-tooltip>
            <template slot="title">短信或微信中有一个发送成功即代表发送成功。</template>
            <a-icon type="question-circle" class="_ml-10" />
          </a-tooltip>
        </span>
      </span>

      <!-- 自定义标题--阅读 -->
      <span slot="customTitleReadStatus">
        <span class="disFlxAC">
          <span>阅读</span>
          <a-tooltip>
            <template slot="title">已阅读表示用户点击了微信消息或点击了短信中的链接。</template>
            <a-icon type="question-circle" class="_ml-10" />
          </a-tooltip>
        </span>
      </span>

      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>
      <!-- 消息类型 -->
      <span slot="typeName">
        {{ row.typeName }}
      </span>
      <!-- 发送状态 -->
      <span slot="sendStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('sendStatusDict')" :value="text" />
      </span>
      <!-- 阅读状态 -->
      <span slot="readStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('readStatusDict')" :value="text" isText />
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { MessageRecipientList, TypeMessageTemplate, SmsTemplateTypeById } from '@/api/operations/message'
import { MemberInfoSearchVoList } from '@/api/system/system'
import DictTag from '@/components/DictTag'

export default {
  components: {
    STable,
    DictTag,
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
      },
      queryParam: {
        sendStatus: undefined,
        readStatus: undefined,
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px',
        },
        {
          title: '消息类型',
          dataIndex: 'typeName',
          ellipsis: true,
          width: '120px',
          scopedSlots: { customRender: 'typeName' },
        },
        {
          title: '姓名',
          dataIndex: 'recipientName',
          width: '120px',
        },
        {
          title: '电话',
          dataIndex: 'phoneNumber',
          width: '120px',
        },
        {
          title: '会员职务',
          dataIndex: 'position',
          width: '100px',
        },
        {
          title: '单位名称',
          dataIndex: 'companyName',
          width: '150px',
        },
        {
          title: '单位职务',
          dataIndex: 'companyPosition',
          width: '90px',
        },
        {
          dataIndex: 'sendStatus',
          slots: { title: 'customTitleSendStatus' },
          scopedSlots: { customRender: 'sendStatus' },
          width: '90px',
        },
        {
          dataIndex: 'readStatus',
          slots: { title: 'customTitleReadStatus' },
          scopedSlots: { customRender: 'readStatus' },
          width: '120px',
        },
      ],
      range: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize,
        }
        return MessageRecipientList(
          Object.assign(params, this.queryParam, {
            unionMsgId: this.row.unionMsgId,
          })
        )
          .then((res) => {
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch((err) => {
            this.$message.error(err.msg)
          })
      },
      row: {},
      selectedRowKeys: [],
      selectedRows: [],
      messageChannelList: [],
      resendData: {},
    }
  },
  created() {
    this.row = JSON.parse(this.$route.query.row)
    this.getTypeMessageTemplate()
  },
  methods: {
    // 重置
    handleReset() {
      this.queryParam = {
        sendStatus: undefined,
        readStatus: undefined,
      }
      this.handleReload()
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    //表格数据选中
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    async handleResend() {
      await this.getDataSource()
      await this.getMemberInfoSearchVoList()
      console.log(JSON.parse(JSON.stringify(this.resendData)))
      this.$store.commit('SET_SMSTEMPLATEOBJ', this.resendData.smsTemplateObj)
      this.$store.commit('SET_PAGESELECTEDOBJ', this.resendData.pageSelectedObj)
      this.$router.push({
        path: '/operations/createMessage',
        query: {
          objectId: this.row.associationObjectId,
          title: this.row.messageTitle,
          messageChannelList: JSON.stringify(this.row.messageChannelList),
        },
      })
    },
    async getDataSource() {
      let res = await SmsTemplateTypeById(this.row.typeId)
      this.resendData.dataSource = res.data.dataSource
      this.resendData.smsTemplateObj = {
        ids: res.data.parentId ? [res.data.parentId, res.data.id] : [res.data.id],
        data: [{ ...res.data }],
      }
    },
    async getMemberInfoSearchVoList() {
      let res = await MemberInfoSearchVoList({
        current: 1,
        size: this.selectedRows.length,
        dataSource: this.resendData.dataSource,
        objectId: this.row.associationObjectId,
        userIds: this.selectedRows.map((item) => item.recipientId),
      })
      this.resendData.pageSelectedObj = {
        1: res.data.records || [],
      }
    },
    async getTypeMessageTemplate() {
      let res = await TypeMessageTemplate({ messageChannelList: this.row.messageChannelList })
      this.messageChannelList = res.data || []
    },
  },
}
</script>
<style scoped lang="less">
.content {
  width: 500px;
  height: 200px;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
}
</style>